<template>
  <view class="find-container">
    <view class="header-container">
      <view class="left"></view>
      <view class="center">发现</view>
      <view class="right"></view>
    </view>
    <view class="main-container">
      <!-- <view class="tabs-container">
        <view
          :class="{ 'tab-item': true, 'active': tabIndex === 'strategy' }"
          @click="changeTabIndex('strategy')"
        >游园攻略</view>
        <view
          :class="{ 'tab-item': true, 'active': tabIndex === 'activity' }"
          @click="changeTabIndex('activity')"
        >游园活动</view>
        <view
          :class="{ 'tab-item': true, 'active': tabIndex === 'song' }"
          @click="changeTabIndex('song')"
        >大宋文化</view>
      </view> -->
      <view class="content-container">
        <scroll-view v-if="tabIndex === 'strategy'" class="strategy-container" :scroll-y="true" @scrolltolower="getStrategyByPage(true)" @scrolltoupper="getStrategyByPage">
          <view class="column" v-for="i in [0, 1]" :key="i">
            <template v-for="(strategy, index) in steategysList">
              <view v-if="index % 2 === i" class="item" :key="strategy.id" @click="toPage('/pages/strategy/index?id=' + strategy.id)">
                <img :src="strategy.imageUrl" alt @error="strategy.imageUrl = $config.MAIN_IMAGE_SERVICE_ADDR + '/moblie_app_slices/find_imgs/image_empty.png'" />
                <text class="title">{{ strategy.title|common_ellipsis(8) }}</text>
                <text class="message">{{ strategy.info|common_ellipsis(20) }}</text>
              </view>
            </template>
          </view>
          <view style="width: 100%; color: #666666; font-size: 14px;text-align: center;">没有更多了，<a href="javascript:;" @click="getStrategyByPage()">刷新试试</a></view>
        </scroll-view>
        <scroll-view v-if="tabIndex === 'activity'" class="active-container" :scroll-y="true" @scrolltolower="getActivityByPage(true)" @scrolltoupper="getActivityByPage">
          <view v-for="activity in activityList" :key="activity.id" class="item" @click="toPage('/pages/active/index?id=' + activity.id)">
            <img :src="activity.image_url" alt />
            <view class="message">
              <text class="title">{{ activity.title|common_ellipsis(4) }}</text>
              <text class="detail">{{ activity.info|common_ellipsis(20) }}</text>
            </view>
          </view>
          <view style="width: 100%; color: #666666; font-size: 14px;text-align: center;">没有更多了，<a href="javascript:;" @click="getActivityByPage()">刷新试试</a></view>
        </scroll-view>
        <scroll-view v-if="tabIndex === 'song'" class="song-container" :scroll-y="true" >
          <view v-for="(song, index) in songList" :key="song.id" class="item" @click="toPage('/pages/song/index?id=' + song.id)">
            <view class="bage">No.{{ index + 1 }}</view>
            <img :src="song.image_url" alt />
            <text class="title">{{ song.title|common_ellipsis(4) }}</text>
            <text class="message">{{ song.info|common_ellipsis(20) }}</text>
          </view>
          <view style="width: 100%; color: #666666; font-size: 14px;text-align: center;">没有更多了，<a href="javascript:;">刷新试试</a></view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>
<script lang="ts">
import Vue from "vue";
import Config from "../../Config";

export default Vue.extend({
  data() {
    return {
      tabIndex: "strategy",
      strategysPage: 1,
      steategysList: [],
      activityPage: 1,
      activityList: [],
      songList: [{
        id: 0,
        image_url: '/static/index_slices/20160824141001_XmEtU.jpeg',
        title: "湖畔景区",
        info: "据您123.4公里"
      },
      {
        id: 1,
        image_url: '/static/index_slices/20160824141001_XmEtU.jpeg',
        title: "湖畔景区",
        info: "据您123.4公里"
      },
      {
        id: 2,
        image_url: '/static/index_slices/20160824141001_XmEtU.jpeg',
        title: "湖畔景区",
        info: "据您123.4公里"
      },
      {
        id: 3,
        image_url: '/static/index_slices/20160824141001_XmEtU.jpeg',
        title: "湖畔景区",
        info: "据您123.4公里"
      },
      {
        id: 4,
        image_url: '/static/index_slices/20160824141001_XmEtU.jpeg',
        title: "湖畔景区",
        info: "据您123.4公里"
      },
      {
        id: 5,
        image_url: '/static/index_slices/20160824141001_XmEtU.jpeg',
        title: "湖畔景区",
        info: "据您123.4公里"
      }]
    };
  },
  mounted() {
    this.changeTabIndex("strategy");
    this.getStrategyByPage();
    this.getActivityByPage();
  },
  methods: {
    changeTabIndex(tab: string) {
      this.tabIndex = tab;
    },
    getStrategyByPage(next?: boolean) {
      if (next && this.steategysList.length / this.strategysPage >= new Config().FIND_STRATEGY_PAGE_SIZE) {
        this.strategysPage = this.strategysPage + 1;
      }
      this.$mainApi
        .apiGetStrategysByPage(0, new Config().FIND_STRATEGY_PAGE_SIZE)
        .then((res: any) => {
          if (!next) this.steategysList = [];
          this.steategysList = this.steategysList.concat(res.data.records);
        });
    },
    getActivityByPage(next?: boolean) {
      if (next && this.activityList.length / this.activityPage >= new Config().FIND_ACTIVITY_PAGE_SIZE) {
        this.activityPage = this.activityPage + 1;
      }
      this.$mainApi
        .apiGetActivitysByPage(0, new Config().FIND_ACTIVITY_PAGE_SIZE)
        .then((res: any) => {
          if (!next) this.activityList = [];
          this.activityList = this.activityList.concat(res.data.records);
        });
    },
    nextPage(which: string) {
      switch (which) {
        case "Strategy":
          this.getStrategyByPage();
          break;
        case "Activity":
          this.getActivityByPage();
          break;
      }
    },
    toPage(path: string) {
      uni.navigateTo({
        url: path
      });
    }
  },
});
</script>
<style scoped>
.find-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f4f7f7;
}

.header-container {
  color: #fff;
  height: 24px;
  padding: 15px;
  flex-shrink: 0;
  display: flex;
  background: #006b65;
}

.header-container .left,
.header-container .right {
  font-size: 16px;
  width: 100px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-container .center {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-container {
  flex-grow: 1;
  overflow: auto;
  display: flex;
}

.tabs-container {
  width: 100px;
  flex-shrink: 0;
}

.tabs-container .tab-item {
  font-size: 16px;
  padding: 15px;
  text-align: center;
}

.tabs-container .tab-item.active {
  background-color: #ffffff;
}

.content-container {
  height: 100%;
  flex-grow: 1;
  display: flex;
  background-color: #ffffff;
}

.strategy-container {
  padding: 15px;
}

.strategy-container >>> .uni-scroll-view-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
}

.strategy-container .column {
  width: 46%;
  display: flex;
  flex-direction: column;
}

.strategy-container .item {
  width: calc(100% - 2px);
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.strategy-container .item img {
  width: 100%;
}

.strategy-container .item .title {
  color: #333333;
  font-size: 14px;
  font-weight: bolder;
  padding: 2px 5px;
  margin: unset;
  border: unset;
}

.strategy-container .item .message {
  color: #666666;
  font-size: 8px;
  padding: 2px 5px;
}

.active-container {
  padding: 15px;
  display: flex;
  flex-direction: column;
}

.active-container .item {
  margin-bottom: 15px;
  display: flex;
}

.active-container .item img {
  width: 140px;
  margin-right: 15px;
  flex-shrink: 0;
}

.active-container .item .message {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.active-container .item .message .title {
  color: #333333;
  font-size: 16px;
  font-weight: bolder;
  padding: unset;
  margin: unset;
  border: unset;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-container .item .message .detail {
  color: #666666;
  font-size: 12px;
  margin-top: 5px;
}

.song-container {
  padding: 15px;
}

.song-container >>> .uni-scroll-view-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
}

.song-container .item {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  position: relative;
}

.song-container .item .bage {
  color: #FFFFFF;
  font-size: 8px;
  padding: 2px 5px;
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #006b65;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.song-container .item img {
  width: calc(50vw - 80px);
  height: calc(50vw - 80px);
  border-radius: 10px;
}

.song-container .item .title {
  color: #333333;
  font-size: 14px;
  font-weight: bolder;
  padding: unset;
  margin: unset;
  border: unset;
}

.song-container .item .message {
  color: #666666;
  font-size: 8px;
}
</style>
